<!DOCTYPE html>
<html layout:decorate="~{layout/master}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>

</head>
<body>
<div layout:fragment="content">
    <div class="g-dg-search-banner">
        <i-form ref="mySearchForm" :model="searchForm" :label-width="80">
            <Row>
                <i-col span="8">
                    <Form-item label="键值">
                        <i-input v-model="searchForm.roleKey" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>
                <i-col span="8">
                    <Form-item label="名称">
                        <i-input v-model="searchForm.name" placeholder="请输入"></i-input>
                    </Form-item>
                </i-col>
                <!--<i-col span="8">-->
                    <!--<Form-item label="角色状态">-->
                        <!--<i-select v-model="searchForm.status">-->
                            <!--<i-option :value="-1" :key="-1" label="全部"></i-option>-->
                            <!--<i-option :value="1" :key="1" label="内部角色"></i-option>-->
                            <!--<i-option :value="2" :key="2" label="公开角色"></i-option>-->
                        <!--</i-select>-->
                    <!--</Form-item>-->
                <!--</i-col>-->
            </Row>
        </i-form>
    </div>
    <div class="g-dg-toolbar">
        <i-button type="info" icon="search" @click="reload">查询</i-button>
        <i-button type="primary" icon="android-add-circle" @click="add">新增</i-button>
        <i-button type="warning" icon="android-remove-circle" @click="remove">删除</i-button>
    </div>
    <i-table :data="dtData" :columns="dtCols" :height="getTableHeight" size="small" :highlight-row="true"
             @on-selection-change="onSelRows" @on-current-change="onCurrentChange" @on-row-dblclick="edit"
             stripe></i-table>
    <div class="g-dg-footbar">
        <div>
            <Page :total="total" :current="page" show-elevator show-sizer show-total placement="top"
                  @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </div>
    </div>
</div>
<script layout:fragment="script">
    const m_apis = {
        getList(p_body, p_page, p_pageSize) {
            return PB.apiRoute('/api/sys/role/getList?pageNo=' + p_page + '&pageSize=' + p_pageSize, 'GET', p_body);
        },
        remove(p_ids) {
            return PB.apiRoute('/api/sys/role/remove?ids=' + p_ids, 'POST');
        }
    };
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                apis: m_apis,
                title: '角色管理',
                page: 1,
                pageSize: 10,
                total: 0,
                searchForm: {
                    status: 2
                },
                dtData: [],
                dtCols: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '角色编码',
                        key: 'roleKey'
                    },
                    {
                        title: '角色名称',
                        key: 'name'
                    },
                    {
                        title: '操作',
                        fixed: 'right',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            setTimeout(() => { // 延迟一下，让选中行事件先执行，才能拿到currentRow
                                                this.edit(this.currentRow)
                                            }, 1);
                                        }
                                    },
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginLeft: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            setTimeout(() => { // 延迟一下，让选中行事件先执行，才能拿到currentRow
                                                this.readUsers(this.currentRow)
                                            }, 1);
                                        }
                                    },
                                }, '所属用户')
                            ]);
                        }
                    }
                ],
                currentRow: null,
                selRows: null
            }
        },
        created() {
            this.loadData();
        },
        computed: {
            getTableHeight() {
                // 自己控制，减搜索栏，减按钮工具栏，减列头，减分页高度
                return window.innerHeight - 180;
            }
        },
        methods: {
            loadData() {
                let that = this;
                PB.ajax(this.apis.getList(this.searchForm, this.page, this.pageSize), function (d) {
                    that.dtData = d.data;
                    that.total = d.total;
                });
            },
            reload() {
                this.page = 1;
                this.loadData();
            },
            onCurrentChange(currentRow, oldCurrentRow) {
                this.currentRow = currentRow;
            },
            onSelRows(selection) {
                this.selRows = selection;
            },
            changePage(e) {
                this.page = e;
                this.loadData();
            },
            changePageSize(e) {
                this.page = 1;
                this.pageSize = e;
                this.loadData();
            },
            add() {
                PB.showFormPage('sys/role/detail', this.title);
            },
            edit(row) {
                PB.showFormPage('sys/role/detail?id=' + row.id, this.title);
            },
            readUsers(row) {
                PB.showFormPage('sys/role/readUsers?id=' + row.id, this.title);
            },
            remove() {
                if (this.selRows) {
                    let that = this;
                    PB.confirm('确定删除吗？', function () {
                        PB.ajax(that.apis.remove(that.selRows.map(q => q.id)), function (d) {
                            that.reload();
                        });
                    });
                }
            }
        }
    })

    function saveOK() {
        vm.reload();
    }
</script>
</body>
</html>
